<template>
  <div>
    <el-card>
      <cp-editor :content="addFrom.content" @handleEditorChange="handleEditorChange"></cp-editor>
      <el-button type="primary" class="upload-btn" @click="add">上传准则</el-button>
    </el-card>
  </div>
</template>
<script>
import { getRuleApi, uploadRuleApi } from '../../request/apis'
import Editor from '../blog/Editor.vue'
export default {
  data () {
    return {
      addFrom: {
        content: '',
        id: ''
      },
      newHtml: ''
    }
  },
  components: {
    'cp-editor': Editor
  },
  created () {
    this.getRule()
  },
  methods: {
    async getRule () {
      const { data, meta } = await getRuleApi()
      if (meta.status === 200 && data.content) {
        this.addFrom.content = data.content
        this.addFrom.id = data.id
      }
    },
    handleEditorChange (newHtml) {
      this.newHtml = newHtml
    },
    async add () {
      this.addFrom.content = this.newHtml
      const { meta } = await uploadRuleApi(this.addFrom)
      if (meta.status === 200) {
        this.$message.success('发布成功')
      }
    }
  }
}
</script>

<style scoped>
.upload-btn {
  margin: 30px 0 0 50px;
}
</style>
